<template>
    <div class="footsty">
        <!-- <div> -->
        <Row style="margin: 25px 0;">
            <Col span="19">
            <Button @click="toggleUrl('link1')" :style='{marginRight:"10px",color: activeColor}'>环境保护常用链接</Button>
            <Button @click="toggleUrl('link2')" :style='{color: normalColr}'>各省环保厅链接</Button>
            <dl style="margin-top:15px;" v-if="isShow">
                <dd>
                    <a href="http://www.mee.gov.cn/" target="_blank">生态环境部</a>
                    <a href="http://hbw.chinaenvironment.com/" target="_blank">环保网</a>
                    <a href="http://www.cnzhlx.com/" target="_blank">中环联新（北京）环境保护有限公司</a>
                    <a href="https://weke.anhuanjia.com/" target="_blank">鑫微客人单合平台</a>
                    <a href="http://www.guangdonggelin.com/" target="_blank">广东格林检测技术有限公司</a>
                    <a href="http://www.eiafans.com/forum.php" target="_blank">环评爱好者</a>
                    <a href="http://www.gov.cn/" target="_blank">中国政府网</a>
                    <a href="http://www.miit.gov.cn/" target="_blank">国家发展和改革委员会</a>
                    <a href="http://www.moj.gov.cn/" target="_blank">司法部</a>
                    <a href="http://www.mnr.gov.cn/" target="_blank">自然资源部</a>                    
                </dd>
            </dl>
            <dl style="margin-top:15px;" v-else>
                <dd>
                    <a href="http://www.bjepb.gov.cn/" target="_blank">北京市环保局</a>
                    <a href="http://hjbh.tj.gov.cn/" target="_blank">天津市环保局</a>
                    <a href="http://www.hebhb.gov.cn/" target="_blank">河北省环境保护厅</a>
                    <a href="http://www.sxhb.gov.cn/" target="_blank">山西省环境保护厅</a>
                    <a href="http://hbt.nmg.gov.cn/" target="_blank">内蒙古自治区环境保护厅</a>
                    <a href="http://www.lnepb.gov.cn/" target="_blank">辽宁省环境保护厅</a>
                </dd>
                <dd>
                    <a href="http://hbj.jl.gov.cn/" target="_blank">吉林省环境保护厅</a>
                    <a href="http://www.hljdep.gov.cn/" target="_blank">黑龙江省环境保护厅</a>
                    <a href="http://www.sepb.gov.cn/fa/cms/shhj/index.htm" target="_blank">上海市环境保护局</a>
                    <a href="http://hbt.jiangsu.gov.cn/" target="_blank">江苏省环境保护厅</a>
                    <a href="http://www.zjepb.gov.cn/" target="_blank">浙江省环境保护厅</a>
                    <a href="http://www.aepb.gov.cn/pages/Home.html" target="_blank">安徽省环境保护厅</a>
                </dd>
                <dd>
                    <a href="http://hbt.fujian.gov.cn/" target="_blank">福建省环境保护厅</a>
                    <a href="http://www.jxepb.gov.cn/" target="_blank">江西省环境保护厅</a>
                    <a href="http://www.sdein.gov.cn/" target="_blank">山东省环境保护厅</a>
                    <a href="http://www.hnep.gov.cn/" target="_blank">河南省环境保护厅</a>
                    <a href="http://hbt.hubei.gov.cn/xwzx/" target="_blank">湖北省环境保护厅</a>
                    <a href="http://www.hbt.hunan.gov.cn/" target="_blank">湖南省环境保护厅</a>
                </dd>
                <dd>
                    <a href="http://www.gdep.gov.cn/" target="_blank">广东省环境保护厅</a>
                    <a href="http://www.gxepb.gov.cn/" target="_blank">广西壮族自然保护区</a>
                    <a href="http://hnsthb.hainan.gov.cn/" target="_blank">海南省生态环境保护厅</a>
                    <a href="http://www.xzep.gov.cn/" target="_blank">西藏自治区环境保护厅</a>
                    <a href="http://www.cepb.gov.cn/" target="_blank">重庆市环境保护局</a>
                </dd>
                <dd>
                    <a href="http://www.schj.gov.cn/" target="_blank">四川省环境保护厅</a>
                    <a href="http://www.gzhjbh.gov.cn/" target="_blank">贵州省环境保护厅</a>
                    <a href="http://www.ynepb.gov.cn/" target="_blank">云南省环境保护厅</a>
                    <a href="http://www.snepb.gov.cn/" target="_blank">陕西省环境保护厅</a>
                    <a href="http://www.gsep.gansu.gov.cn/" target="_blank">甘肃省环境保护厅</a>
                    <a href="http://www.qhepb.gov.cn/" target="_blank">青海环保</a>
                </dd>
                <dd>
                    <a href="http://www.nxep.gov.cn/" target="_blank">宁夏环境保护网</a>
                    <a href="http://www.xjepb.gov.cn/" target="_blank">新疆维吾尔自治区环境保护厅</a>
                    <a href="http://jshbj.xjbt.gov.cn/" target="_blank">新疆兵团住房和城乡建设局</a>
                </dd>
            </dl>
            
            </Col>
            <Col span="5" style="border-left:1px solid #fff;padding-bottom:15px;">
            <!-- <Row :gutter="8"> -->
            <Row style="padding-left:10px;font-size:10px;">
                <Col span="8" style="padding-right:8px;">
                <img src="../../../assets/img/weichat.png" style="width: 100%">
           		</Col>
                <Col span="16">
                <span class="one">安环家微信公众号</span>
                <br>
                <span class="one">实时获取行业资讯，更快捷!</span>
                <br>
                <span class="one">安环人的互动家园，更方便!</span>
                <br/>
                <Button type="default" ghost style="margin-top:10px;font-size:15px;">
                    <Icon type="ios-call" />
                    400-7666-950
                </Button>
                </Col>
                <!-- <Col span="2">
                	<img src="../../../assets/img/logo.png">
                </Col> -->
            </Row>
            </Col>
            <Col style="position:absolute;right:-50px;top:60px;">
                <a href="javascript:scrollTo(0,0);">
                    <img src="../../../assets/img/logo.png" style="width:40px;" >
                </a>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShow: true,
            activeColor: '#339AFF',
            normalColr: '#000'
        }
    },
    methods: {
        toggleUrl(type) {
            if(type == 'link1') {
                this.isShow = true
                this.activeColor = '#339AFF'
                this.normalColr = '#000'
            }else {
                this.isShow = false
                this.activeColor = '#000'
                this.normalColr = '#339AFF'
            }
        }
    }
}
</script>
<style lang="less">
.footsty {
    // width: 75%;
    // margin: auto;
    max-width: 1200px;
    width: 1200px;
    display: block;
    margin:auto; 
    height: 220px;
}

.one {
    color: #ffffff;
}
dl a{
    display: inline-block;
    margin-right: 35px;
    margin-bottom: 5px;
    color: #ffffff
}

</style>